<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <!--引入ElementUI组件库提供的css文件-->
    <link rel="stylesheet" href="../css/elementui.css">
</head>
<body>
<div id="app">
    <!--搜索表单-->
    <!--表单组件-->
    <el-form :inline="true">
        <el-form-item label="品牌名称">
            <el-input v-model="searchMap.name" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
            <el-input v-model="searchMap.letter" placeholder="品牌首字母"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="pojo={},formVisible = true">新增</el-button>
            <!--pojo={} 清空pojo对象，在更新品牌信息时修改了pojo对象，这里初始化一下-->
        </el-form-item>
    </el-form>
    <!--使用表格控件展现数据-->
    <!--遍历打印：el控制遍历的流程，我们只需要指定要进行遍历的对象，和要打印的东西-->
    <!--表格组件-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="letter"
                label="首字母">
        </el-table-column>
        <el-table-column
                label="图片"
                width="180">
            <!--模板，slot-scope指定作用范围，:src="scope.row.image"为 img 的src 属性绑定值，其中，scope.row.imge中的image对应的是响应数据的属性字段，-->
            <template slot-scope="scope">
                <!--注意： 图片保存在网络上而非本地，要通过网络来加载图片-->
                <img :src="scope.row.image">
            </template>
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="update(scope.row.id)" type="text" size="small">修改</el-button>
                <el-button @click="dele(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <!--@: 事件-->
    <!--@size-change: 更改每页显示的记录条数时 触发执行fetchData函数，重新向后端请求数据-->
    <!--@current-change: 当前页更改时触发-->
    <!--sync（同步）修饰符，加上后才能双向绑定数据（前端更改的数据会加载到dom对象中,动态显示数据）
            否则页面数据不会发生变化->
        :current-page.sync="currentPage"
         实际应用时动态绑定数据 --->
    <!--layout: 布局列表（导航条）-->
    <!--分页组件-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="fetchData"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--Dialog对话框组件-->
    <!--嵌套表单的 Dialog-->
    <el-dialog
            title="品牌编辑"
            :visible.sync="formVisible">
        <el-form label-width="80px">
            <el-form-item label="品牌名称">
                <el-input placeholder="品牌名称" v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌首字母">
                <el-input placeholder="品牌首字母" v-model="pojo.letter"></el-input>
            </el-form-item>
            <el-form-item label="品牌图片">
                 <el-upload
                         class="avatar-uploader"
                         action="/upload/native.do"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess"
                         :before-upload="beforeAvatarUpload">
                     <img v-if="imageUrl" :src="imageUrl" class="avatar">
                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 </el-upload>
            </el-form-item>
            <el-form-item label="品牌排序">
                <el-input placeholder="品牌排序" v-model="pojo.seq"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="formVisible = false">关闭</el-button>
            <el-button @click="save()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<!--引入js文件，注意js文件的引入顺序，有执行的顺序和依赖顺序-->
<script src="../js/vue.js"></script>   <!--VUE-->
<script src="../js/elementui.js"></script>  <!--ElementUI-->
<script src="../js/axios.js"></script>  <!--异步请求-->

<script>
    new Vue({
        el: '#app',//绑定dom元素，接管区域
        data() {
            return {  //json对象
                tableData: [],//要遍历的对象，是一个数组变量，双向绑定数据
                currentPage: 1, //当前页
                total: 10,//总记录数
                size: 10,//每页显示的记录数
                searchMap: {},
                formVisible: false,
                pojo: {},
                imageUrl:'', //为img绑定src属性的值
            }
        },
        created() { //钩子函数，vue对象创建完成后会立刻执行
            //异步请求
            /*axios.get('../brand/findAll.do').then(response => { //箭头函数
            this.tableData = response.data;//将服务器响应的数据赋值给数组变量tableData
            });*/
            //在页面加载时使用方法的值
            this.fetchData();
        },
        methods: {

            //size改变时(sizes)
            handleSizeChange(val) {
                this.pageSize = val;//获取page-sizes里的每页显示几条数据的值，赋给我们自定义的每页显示数量的变量
                this.fetchData();
            },
            //请求分页查询，更新变量的值
            fetchData() {
                axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`, this.searchMap).then(response => {
                    this.tableData = response.data.rows;
                    this.total = response.data.total;
                })
            },
            save() {
                this.pojo.image = this.imageUrl;
                axios.post(`/brand/${this.pojo.id == null ? 'add' : 'update'}.do`, this.pojo).then(response => {
                    this.findAfterSave();
                    this.formVisible = false;
                    this.fetchData();//刷新列表
                });
            },

            findAfterSave() {
                axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`, this.pojo).then(response => {
                    this.tableData = response.data.rows;
                    this.total = response.data.total;
                })
            },
            update(id) {
                //数据回显到弹框中
                this.formVisible = true //打开弹窗
                axios.get(`/brand/findById.do?id=${id}`).then(response => {
                    this.imageUrl = this.pojo.image //回显图片
                    //更新pojo
                    this.pojo = response.data;  //服务器返回Brand对象
                })
            },
            dele(id) {
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//点击确定执行
                    axios.get(`/brand/deleteById.do?id=${id}`).then(response => {
                        if (response.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.fetchData();//刷新列表
                        } else {
                            this.$message({
                                type: 'error',
                                message: '删除失败'
                            });
                        }
                    });
                });
            },
            handleAvatarSuccess(res,file){
                alert(file)
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                alert(file)
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }

        }
    })


</script>
</html>